import { defineComponent } from 'vue'
import CommentAll from './components/CommentAll'
import IconSelector from '@/components/nComponents/IconSelector'
import {
  NCollapseItem,
  NInput,
  NSwitch,
  NSelect,
  NButton,
  NButtonGroup,
  NInputNumber
} from 'naive-ui'
import type { PropType } from 'vue'
import type { questionSideListState } from '@/types/baseConfig'

export default defineComponent({
  name: 'InputNumber',
  props: {
    compData: {
      type: Object as PropType<questionSideListState>,
      default: () => {
        return {}
      }
    }
  },
  emits: ['save'],
  setup: function (props, { emit }) {
    const handSave = (e: questionSideListState) => {
      emit('save', e)
    }
    const setNull = (
      info: questionSideListState,
      e: 'min' | 'max' | 'precision',
      handOptions: () => void
    ) => {
      if (info.InputNumberForm) info.InputNumberForm[e] = null
      setTimeout(() => {
        if (info.InputNumberForm) delete info.InputNumberForm[e]
      }, 80)
      handOptions()
    }
    const loadingChange = (
      e: questionSideListState,
      status: boolean | undefined,
      handOptions: () => void
    ) => {
      if (e.InputNumberForm) {
        e.InputNumberForm.loading = status
      }
      handOptions()
    }
    const buttonPlacementOptions = [
      {
        label: '两侧',
        value: 'both'
      },
      {
        label: '右侧',
        value: 'right'
      }
    ]
    return () => (
      <CommentAll
        comp-data={props.compData}
        onSave={handSave}
        v-slots={{
          default: ({
            info,
            handSetting,
            handOptions
          }: {
            info: questionSideListState
            handOptions: () => void
            handSetting: (labelKey: string) => void
          }) => (
            <NCollapseItem
              name="rowParams"
              v-slots={{
                header: () => (
                  <div class="cell flex item">
                    <div class="title u-line-1">数字输入框属性</div>
                  </div>
                ),
                default: () => (
                  <>
                    {info.InputNumberForm && (
                      <div>
                        <div class="settingItemTitle">提示语句</div>
                        <div class="edit-input">
                          <NInput
                            v-model:value={info.InputNumberForm.placeholder}
                            placeholder="请输入placeholder"
                            clearable
                            onBlur={handOptions}
                          />
                        </div>
                        <div class="mt-5 flex items-center">
                          <div class="settingItemTitle">每次改变步数，可以为小数</div>
                          <div class="ml-[10px] flex-1 flex items-center">
                            <NInputNumber
                              v-model:value={info.InputNumberForm.step}
                              placeholder="请输入"
                              onBlur={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-5 flex items-center">
                          <div class="settingItemTitle">最小值</div>
                          <div class="ml-[10px] flex-1 flex items-center">
                            <NButton
                              size="small"
                              type={info.InputNumberForm.min === undefined ? 'primary' : 'default'}
                              onClick={() => setNull(info, 'min', handOptions)}
                            >
                              <span>空</span>
                            </NButton>
                            <div class="flex-1">
                              <NInputNumber
                                class="ml-[5px]"
                                v-model:value={info.InputNumberForm.min}
                                placeholder="请输入"
                                onBlur={handOptions}
                              />
                            </div>
                          </div>
                        </div>
                        <div class="mt-5 flex items-center">
                          <div class="settingItemTitle">最大值</div>
                          <div class="ml-[10px] flex-1 flex items-center">
                            <NButton
                              size="small"
                              type={info.InputNumberForm.max === undefined ? 'primary' : 'default'}
                              onClick={() => setNull(info, 'max', handOptions)}
                            >
                              <span>空</span>
                            </NButton>
                            <div class="flex-1">
                              <NInputNumber
                                class="ml-[5px]"
                                v-model:value={info.InputNumberForm.max}
                                placeholder="请输入"
                                onBlur={handOptions}
                              />
                            </div>
                          </div>
                        </div>
                        <div class="mt-5 flex items-center">
                          <div class="settingItemTitle">数值保留的精度值</div>
                          <div class="ml-[10px] flex-1 flex items-center">
                            <NButton
                              size="small"
                              type={
                                info.InputNumberForm.precision === undefined ? 'primary' : 'default'
                              }
                              onClick={() => setNull(info, 'precision', handOptions)}
                            >
                              <span>空</span>
                            </NButton>
                            <div class="flex-1">
                              <NInputNumber
                                class="ml-[5px]"
                                v-model:value={info.InputNumberForm.precision}
                                placeholder="请输入"
                                onBlur={handOptions}
                              />
                            </div>
                          </div>
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">
                            {' '}
                            在输入的过程中，在输入值合法的情况下，是否改变值
                          </div>
                          <div class="mt-[10px]">
                            <NSwitch
                              v-model:value={info.InputNumberForm.updateValueOnInput}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle"> 是否有按钮</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.InputNumberForm.showButton}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        {info.InputNumberForm.showButton && (
                          <>
                            <div class="mt-[20px]">
                              <div class="settingItemTitle">加减按钮的位置</div>
                              <div class="edit-input">
                                <NSelect
                                  v-model:value={info.InputNumberForm.buttonPlacement}
                                  options={buttonPlacementOptions}
                                  placeholder="请选择"
                                  onUpdateValue={handOptions}
                                />
                              </div>
                            </div>
                            <div class="mt-[20px]">
                              <div class="settingItemTitle">增加按钮的图标</div>
                              <div class="edit-input">
                                <IconSelector
                                  v-model={info.InputNumberForm.addIcon}
                                  onUpdate:modelValue={handOptions}
                                />
                              </div>
                            </div>
                            <div class="mt-[20px]">
                              <div class="settingItemTitle">减少按钮的图标</div>
                              <div class="edit-input">
                                <IconSelector
                                  v-model={info.InputNumberForm.minusIcon}
                                  onUpdate:modelValue={handOptions}
                                />
                              </div>
                            </div>
                          </>
                        )}
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">键盘(ArrowUp)</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.InputNumberForm.keyboard.ArrowUp}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">键盘(ArrowDown)</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.InputNumberForm.keyboard.ArrowDown}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">是否自动获取焦点</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.InputNumberForm.autofocus}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle"> 是否有边框</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.InputNumberForm.bordered}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">只读</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.InputNumberForm.readonly}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">是否可清空</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.InputNumberForm.clearable}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">
                            format: 格式化值的方法，设定后会禁用 update-value-on-input
                          </div>
                          <div class="mt-[5px]">
                            <NButton
                              round
                              size="small"
                              onClick={() => handSetting('InputNumberForm.format')}
                            >
                              去设置
                            </NButton>
                          </div>
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">
                            parse: 解析输入的字符串，设定后会禁用 update-value-on-input
                          </div>
                          <div class="mt-[5px]">
                            <NButton
                              round
                              size="small"
                              onClick={() => handSetting('InputNumberForm.parse')}
                            >
                              去设置
                            </NButton>
                          </div>
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">是否展示加载图标</div>
                          <div class="edit-input">
                            <NButtonGroup>
                              <NButton
                                type={info.InputNumberForm.loading === true ? 'primary' : 'default'}
                                round
                                onClick={() => loadingChange(info, true, handOptions)}
                              >
                                <span>展示</span>
                              </NButton>
                              <NButton
                                type={
                                  info.InputNumberForm.loading === false ? 'primary' : 'default'
                                }
                                round
                                onClick={() => loadingChange(info, false, handOptions)}
                              >
                                <span>不展示(占位)</span>
                              </NButton>
                              <NButton
                                type={
                                  info.InputNumberForm.loading === undefined ? 'primary' : 'default'
                                }
                                round
                                onClick={() => loadingChange(info, undefined, handOptions)}
                              >
                                <span>不展示(不占位)</span>
                              </NButton>
                            </NButtonGroup>
                          </div>
                        </div>
                      </div>
                    )}
                  </>
                )
              }}
            />
          )
        }}
      />
    )
  }
})
